<template>
  <!--车位使用数据查询-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;display: flex;">
      <!--第一排左侧-->
      <a-col style="background-color: #fff;border-radius: 2px;width: 60%">
        <a-card size="small" title="车辆进出总数" :bordered="false">
          <!--<a slot="extra" href="#">右上角</a>-->
          <template slot="extra"><span style="color: transparent">.</span></template>
          <a-card
            size="small"
            :bordered="false"
            style="width:100%"
            :tab-list="tabListNoTitle"
            :active-tab-key="noTitleKey"
            @tabChange="onTabChange"

          >

            <div style="padding: 10px;">
              <p style="margin: 0px 0px 10px 0px;font-weight: bold;">{{noTitleName}}: {{dataAll1Number}} </p>
            </div>

            <!--自定义加载中-->
            <div class="zhezhaoAllBase" v-if="loadingAll">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div id="containerAll1" class="chartzhu3"></div>

            <template slot="tabBarExtraContent">
              <span class="nowMonth" @click="clickNowMonth">本月</span>
              <a-month-picker :size="'default'" placeholder="请选择月份" style="width: 150px;" :value="nowMonthDate"
                              @change="onChangeDate"/>
            </template>
          </a-card>

        </a-card>
      </a-col>

      <!--第一排右侧-->
      <a-col style="border-radius: 2px;width: 40%">
        <div class="marginLeft10">

          <a-card size="small" title="安亭基地" :bordered="false">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{antingAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClick">
                  <a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.bdParkId" :value="item.bdParkName">
                    {{item.bdParkName}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <p style="margin-left: 10px;font-weight: bold;">{{noTitleName}}: {{antingPeopleNumber}} 个</p>

            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingAnting">
              <a-spin tip="加载中...">
              </a-spin>
            </div>
            <!--柱状图-->
            <div style="width: 100%;height: 200px;text-align: center;line-height: 200px" v-if="antingData == null">
              {{errorMessageAnting}}
            </div>

            <div v-else id="container" class="chartzhu"></div>

          </a-card>
          <div style="height: 10px;width:100%;background-color:#f0f2f5;"></div>
          <a-card size="small" title="银川基地" :bordered="false">
            <div class="areaNotOpened">
              该区域暂未开通
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>

    <!--第二排-->
    <a-row type="flex" class="marginBottom" style="width: 100%">
      <a-col flex="50%" style="background-color: aqua">
        <a-card size="small" title="太仓基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
      <a-col flex="10px"></a-col>
      <a-col flex="auto" style="background-color: blueviolet">
        <a-card size="small" title="湘潭基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import reservationApi from "@/api/reservation";
  import moment from "moment";
  import { registerTheme,Chart } from '@antv/g2';
  registerTheme('newTheme', {minColumnWidth:10,maxColumnWidth:10});

  export default {
    components: {},
    name: '',
    data() {
      return {
        loadingAll: true,
        loadingAnting: true,
        nowMonthDate: moment(new Date(), 'YYYY-MM'),
        aningAreaAll: [
          {bdParkName:"全部",bdParkId:""}
        ],
        errorMessageAnting: "",
        errorMessageAll: "",
        antingAreaName: "全部",
        antingAreaId: "",
        tabListNoTitle: [
          {
            key: '1',
            tab: '车辆进出总数',
          }
        ],
        key: 'tab1',
        noTitleKey: '1',
        noTitleName: '车辆进出总数',
        dataAll1Number: 0,
        dataAll1: [],
        antingPeopleNumber: 0,
        antingData: [
          // { date: '1', value: 0 },
        ],
        height: 380,
        chartAll: null,  //总数据图形对象
        antingChart: null,  //安亭数据图形对象
      }
    },
    beforeMount() {

    },

    mounted() {
      this.pieChartAll1();
      this.pieChart1();
      this.fristAntingData();
      this.getAntingAreaList();

    },
    methods: {
      // 根据基地获取停车场
      async getAntingAreaList() {
        let res = await reservationApi.getCarParkDate(100);
        console.log(res.data);
        if (res.data.success) {
          this.aningAreaAll = [...this.aningAreaAll, ...res.data.result];
        } else {
          this.$message.error(res.data.message);
        }
      },

      clickNowMonth() {
        // console.log(moment(this.nowMonthDate).format('YYYY-MM'))
        this.nowMonthDate = moment(new Date(), 'YYYY-MM');
        this.changeTerm();
      },
      // 安亭基地切换区域
      async handleClick(e) {
        // console.log(e);
        this.antingAreaName = e.item.value;
        this.antingAreaId = e.key;
        await this.getAntingVisitCases();
        this.antingChart.data(this.antingData);
        this.antingChart.render();
      },
      // 获取安亭基地数据
      async getAntingVisitCases() {
        this.loadingAnting = true;
        let params = {
          baseId: 100,  //基地id
          parkingLotId: this.antingAreaId,  //停车场id
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
        };
        let resp = await reservationApi.getVehicleUsageGraph(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.antingData = resp.data.result.data;
          this.antingPeopleNumber = resp.data.result.total;
          this.loadingAnting = false;
          this.antingChart.data(this.antingData);
          this.antingChart.render();
        } else {
          this.loadingAnting = false;
          this.antingData = null;
          this.errorMessageAnting = resp.data.message;
          this.$message.error(resp.data.message);
        }
      },
      // 获取所有基地数据
      async getAllVisitCases() {
        this.loadingAll = true;
        let params = {
          baseId: "",  //基地id
          parkingLotId: "",  //停车场id
          yearMonth: moment(this.nowMonthDate).format('YYYY-MM'),
        };
        let resp = await reservationApi.getVehicleUsageGraph(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.dataAll1 = resp.data.result.data;
          this.dataAll1Number = resp.data.result.total;
          this.loadingAll = false;
          this.chartAll.data(this.dataAll1);
          this.chartAll.render();
        } else {
          this.loadingAll = false;
          this.dataAll1 = null;
          this.errorMessageAll = resp.data.message;
          this.$message.error(resp.data.message);
        }
      },
      fristAntingData() {
        this.getAllVisitCases();
        this.getAntingVisitCases();
      },
      // 更换查询条件
      changeTerm() {
        this.loadingAnting = true;
        this.getAllVisitCases();
        this.getAntingVisitCases();
      },
      // 安亭访客数据柱状图
      pieChart1() {

        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 500,
          padding: 30,
        });
        this.antingChart = chart;
        chart.data(this.antingData);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme');
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },
      // 全部基地车位数据柱状图--车位使用总数
      pieChartAll1() {
        const chart = new Chart({
          container: 'containerAll1',
          autoFit: true,
          height: this.height,
          padding: 30,
        });
        this.chartAll = chart;
        chart.data(this.dataAll1);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('date', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        chart.tooltip(false);
        chart.interaction('element-active');
        chart.theme('newTheme');
        chart.legend(false);
        chart
          .interval()
          .position('date*value')
          .color('date', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });

        chart.render();

      },

      // 切换tab
      onTabChange(key) {
        this.noTitleKey = key;
        this.noTitleName = this.tabListNoTitle.filter(el => {
          return el.key == key
        })[0].tab;
        // console.log(this.noTitleName);
        this.changeTerm();

      },
      onChangeDate(date, dateString) {
        // console.log(date, dateString);
        this.nowMonthDate = date;
        this.changeTerm();
      },


    },
  }
</script>
